<html>
 <head>
  <meta charset="utf-8"/>
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"/>
  <title>
   数据可视化神器：开源组件Echarts使用心得总结（二）  | 数螺 | NAUT IDEA
  </title>
  <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet"/>
  <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
  <style type="text/css">
   #xmain img {
                  max-width: 100%;
                  display: block;
                  margin-top: 10px;
                  margin-bottom: 10px;
                }

                #xmain p {
                    line-height:150%;
                    font-size: 16px;
                    margin-top: 20px;
                }

                #xmain h2 {
                    font-size: 24px;
                }

                #xmain h3 {
                    font-size: 20px;
                }

                #xmain h4 {
                    font-size: 18px;
                }


                .header {
	           background-color: #0099ff;
	           color: #ffffff;
	           margin-bottom: 20px;
	        }

	        .header p {
                  margin: 0px;
                  padding: 10px 0;
                  display: inline-block;  
                  vertical-align: middle;
                  font-size: 16px;
               }

               .header a {
                 color: white;
               }

              .header img {
                 height: 25px;
              }
  </style>
  <script src="http://cdn.bootcss.com/jquery/3.0.0/jquery.min.js">
  </script>
  <script src="http://nautstatic-10007657.file.myqcloud.com/static/css/readability.min.js" type="text/javascript">
  </script>
  <script type="text/javascript">
   $(document).ready(function() {
                 var loc = document.location;
                 var uri = {
                  spec: "http://dataunion.org/6434.html",
                  host: "http://dataunion.org",
                  prePath: "http://dataunion.org",
                  scheme: "http",
                  pathBase: "http://dataunion.org/"
                 };
    
                 var documentClone = document.cloneNode(true);
                 var article = new Readability(uri, documentClone).parse();
     
                 document.getElementById("xmain").innerHTML = article.content;
                });
  </script>
  <!-- 1466455201: Accept with keywords: (title(0.25):总结,社区,数盟,神器,开源,可视化,组件,数据, topn(0.266666666667):初始化,社区,数盟,图表,行业资讯,文件夹,数据挖掘,数据格式,图形,总结,文件,配置文件,职业规划,可视化,图像,类型,格式,数据,基本,效果,步骤,文章,基础架构,折线图,后台,代码,地图,柱图,折线,页面).-->
 </head>
 <body onload="">
  <div class="header">
   <div class="container">
    <div class="row">
     <div class="col-xs-6 col-sm-6 text-left">
      <a href="/databee">
       <img src="http://nautidea-10007657.cos.myqcloud.com/logo_white.png"/>
      </a>
      <a href="/databee">
       <p>
        数螺
       </p>
      </a>
     </div>
     <div class="hidden-xs col-sm-6 text-right">
      <p>
       致力于数据科学的推广和知识传播
      </p>
     </div>
    </div>
   </div>
  </div>
  <div class="container text-center">
   <h1>
    数据可视化神器：开源组件Echarts使用心得总结（二）
   </h1>
  </div>
  <div class="container" id="xmain">
   ﻿﻿
   <title>
    数据可视化神器：开源组件Echarts使用心得总结（二） | 数盟社区
   </title>
   <!-- All in One SEO Pack 2.2.7.6.2 by Michael Torbert of Semper Fi Web Design[32,75] -->
   <!-- /all in one seo pack -->
   <!--
<div align="center">
<a href="http://strata.oreilly.com.cn/hadoop-big-data-cn?cmp=mp-data-confreg-home-stcn16_dataunion_pc" target="_blank"><img src="http://dataunion.org/wp-content/uploads/2016/05/stratabj.jpg"/ ></a>
</div>
-->
   <header id="header-web">
    <div class="header-main">
     <hgroup class="logo">
      <h1>
       <a href="http://dataunion.org/" rel="home" title="数盟社区">
        <img src="http://dataunion.org/wp-content/themes/yzipi/images/logo.png"/>
       </a>
      </h1>
     </hgroup>
     <!--logo-->
     <nav class="header-nav">
      <ul class="menu" id="menu-%e4%b8%bb%e8%8f%9c%e5%8d%95">
       <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-71" id="menu-item-71">
        <a href="http://dataunion.org/category/events" title="events">
         活动
        </a>
        <ul class="sub-menu">
         <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22457" id="menu-item-22457">
          <a href="http://dataunion.org/2016timeline">
           2016档期
          </a>
         </li>
         <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-22459" id="menu-item-22459">
          <a href="http://dataunion.org/category/parterc">
           合作会议
          </a>
         </li>
        </ul>
       </li>
       <li class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor menu-item-has-children menu-item-20869" id="menu-item-20869">
        <a href="http://dataunion.org/category/tech" title="articles">
         文章
        </a>
        <ul class="sub-menu">
         <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-20867" id="menu-item-20867">
          <a href="http://dataunion.org/category/tech/base" title="base">
           基础架构
          </a>
         </li>
         <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3302" id="menu-item-3302">
          <a href="http://dataunion.org/category/tech/ai" title="ai">
           人工智能
          </a>
         </li>
         <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3303" id="menu-item-3303">
          <a href="http://dataunion.org/category/tech/analysis" title="analysis">
           数据分析
          </a>
         </li>
         <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-21920" id="menu-item-21920">
          <a href="http://dataunion.org/category/tech/dm">
           数据挖掘
          </a>
         </li>
         <li class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-3314" id="menu-item-3314">
          <a href="http://dataunion.org/category/tech/viz" title="viz">
           可视化
          </a>
         </li>
         <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3305" id="menu-item-3305">
          <a href="http://dataunion.org/category/tech/devl" title="devl">
           编程语言
          </a>
         </li>
        </ul>
       </li>
       <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-20876" id="menu-item-20876">
        <a href="http://dataunion.org/category/industry">
         行业
        </a>
        <ul class="sub-menu">
         <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-16328" id="menu-item-16328">
          <a href="http://dataunion.org/category/industry/case" title="case">
           行业应用
          </a>
         </li>
         <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2112" id="menu-item-2112">
          <a href="http://dataunion.org/category/industry/demo" title="demo">
           Demo展示
          </a>
         </li>
         <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-21562" id="menu-item-21562">
          <a href="http://dataunion.org/category/industry/news">
           行业资讯
          </a>
         </li>
        </ul>
       </li>
       <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-311" id="menu-item-311">
        <a href="http://dataunion.org/category/sources" title="sources">
         资源
        </a>
       </li>
       <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-20870" id="menu-item-20870">
        <a href="http://dataunion.org/category/books" title="book">
         图书
        </a>
       </li>
       <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-21363" id="menu-item-21363">
        <a href="http://dataunion.org/category/training">
         课程
        </a>
       </li>
       <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-21853" id="menu-item-21853">
        <a href="http://dataunion.org/category/jobs">
         职位
        </a>
        <ul class="sub-menu">
         <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-22050" id="menu-item-22050">
          <a href="http://dataunion.org/category/career">
           职业规划
          </a>
         </li>
        </ul>
       </li>
      </ul>
     </nav>
     <!--header-nav-->
    </div>
   </header>
   <!--header-web-->
   <div id="main">
    <div id="soutab">
     <form action="http://dataunion.org/" class="search" method="get">
     </form>
    </div>
    <div id="container">
     <nav id="mbx">
      当前位置：
      <a href="http://dataunion.org">
       首页
      </a>
      &gt;
      <a href="http://dataunion.org/category/tech">
       文章
      </a>
      &gt;
      <a href="http://dataunion.org/category/tech/viz">
       可视化
      </a>
      &gt;  正文
     </nav>
     <!--mbx-->
     <article class="content">
      <header align="centre" class="contenttitle">
       <div class="mscc">
        <h1 class="mscctitle">
         <a href="http://dataunion.org/6434.html">
          数据可视化神器：开源组件Echarts使用心得总结（二）
         </a>
        </h1>
        <address class="msccaddress ">
         <em>
          2,534 次阅读 -
         </em>
         <a href="http://dataunion.org/category/tech/viz" rel="category tag">
          可视化
         </a>
        </address>
       </div>
      </header>
      <div class="content-text">
       <h2>
        前言：
       </h2>
       <p>
        前一段时间一直都挺忙的，各种事，也没来得及每周的总结，趁着晚上的一点时间把项目中用的Echart中常用的各种图表给抽象总结了一下，趁着周末跟大家分享一下。之前写过一篇相关的文章，当时主要是讲了如何引入、使用Echart，最新的Echart版本已经发布，之前讲的很多文件都可以删除了，下边会一一给大家细讲。
       </p>
       <p>
        为了更好的讲解如何使用这个图形渲染插件，我会通过创建一个解决方案的形式一点点给大家讲解清楚。
       </p>
       <h2>
        <p name="t3">
        </p>
        1.  EChart最新的文档目录。
       </h2>
       <p>
        首先创建一个解决方案，目录如下：
       </p>
       <p>
        <img src="http://dataunion.org/wp-content/uploads/2015/01/310919094072372.png"/>
       </p>
       <p>
        之前的一篇文章中讲到如果要使用Echarts还要下载相关的ZRender的渲染包，最新的版本已经将这些合并在一起了，只需要引用图中红框标注的echarts文件夹下的文件即可。各文件的作用如下：
       </p>
       <p>
        l  Echarts-map.js :主要用来渲染跟地图相关
       </p>
       <p>
        l  Echarts.js :基本的常规图形相关
       </p>
       <p>
        l  Esl.js :图像引擎
       </p>
       <p>
        Statics文件夹下的ECharts.js文件，为我自己抽象总结出来的用于Echarts的配置文件加载、数据处理、初始化各种图像类型的配置、图像渲染的一些方法。
       </p>
       <h2>
        <p name="t4">
        </p>
        2.  抽象之后的Echarts。
       </h2>
       <p>
        根据Echarts官网的讲解，我把Echarts的使用归结为一下的几个步骤，同时这些步骤相应的实现对应到Statics文件夹下的Echarts.js，该文件的主要代码目录如下：
       </p>
       <div class="cnblogs_Highlighter">
        <div class="dp-highlighter bg_javascript">
         <div class="bar">
          <div class="tools">
           <b>
            [javascript]
           </b>
           <a class="ViewSource" href="http://blog.csdn.net/xuemoyao/article/details/22602837" title="view plain">
            view plain
           </a>
           <a class="CopyToClipboard" href="http://blog.csdn.net/xuemoyao/article/details/22602837" title="copy">
            copy
           </a>
           <p>
           </p>
           <div>
            <embed align="middle" height="18" id="ZeroClipboardMovie_1" name="ZeroClipboardMovie_1" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18">
            </embed>
           </div>
          </div>
         </div>
         <ol class="dp-c" start="1">
          <li class="alt">
           Var ECharts={
          </li>
          <li class="">
          </li>
          <li class="alt">
           ChartConfig:
           <span class="keyword">
            function
           </span>
           (container,option){ …..},
           <span class="comment">
            //加载Echarts配置文件
           </span>
          </li>
          <li class="">
          </li>
          <li class="alt">
           ChartDataFormate:{….},
           <span class="comment">
            //数据格式化
           </span>
          </li>
          <li class="">
          </li>
          <li class="alt">
           ChartOptionTemplates:{….},
           <span class="comment">
            //初始化常用的图表类型
           </span>
          </li>
          <li class="">
          </li>
          <li class="alt">
           Charts:{ RenderChart:
           <span class="keyword">
            function
           </span>
           (option){….},
           <span class="comment">
            //渲染图表
           </span>
          </li>
          <li class="">
          </li>
          <li class="alt">
           RenderMap:
           <span class="keyword">
            function
           </span>
           (option){…}
           <span class="comment">
            //渲染地图
           </span>
          </li>
          <li class="">
          </li>
          <li class="alt">
           }
          </li>
          <li class="">
          </li>
          <li class="alt">
           }；
          </li>
         </ol>
        </div>
       </div>
       <p>
        2.1 Echarts配置文件的引入
       </p>
       <p>
        在开始使用时，首先需要引入Echarts 的配置文件，也就是要加载基本的图像类型，我们可以在每一个页面都引入，但是这样抽象化程度不高，重复使用率也不高，只需要有一个配置项在每次引用的时候加载一下即可，对应到具体的代码实现，如下：
       </p>
       <div>
        <div class="cnblogs_Highlighter">
         <div class="dp-highlighter bg_javascript">
          <div class="bar">
           <div class="tools">
            <b>
             [javascript]
            </b>
            <a class="ViewSource" href="http://blog.csdn.net/xuemoyao/article/details/22602837" title="view plain">
             view plain
            </a>
            <a class="CopyToClipboard" href="http://blog.csdn.net/xuemoyao/article/details/22602837" title="copy">
             copy
            </a>
            <p>
            </p>
            <div>
             <embed align="middle" height="18" id="ZeroClipboardMovie_2" name="ZeroClipboardMovie_2" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18">
             </embed>
            </div>
           </div>
          </div>
          <ol class="dp-c" start="1">
           <li class="alt">
            ChartConfig:
            <span class="keyword">
             function
            </span>
            (container, option) {
            <span class="comment">
             //container:为页面要渲染图表的容器，option为已经初始化好的图表类型的option配置
            </span>
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="keyword">
             var
            </span>
            chart_path =
            <span class="string">
             “/Statics/echarts/echarts”
            </span>
            ;
            <span class="comment">
             //配置图表请求路径
            </span>
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="keyword">
             var
            </span>
            map_path =
            <span class="string">
             “/Statics/echarts/echarts-map”
            </span>
            ;
            <span class="comment">
             //配置地图的请求路径
            </span>
           </li>
           <li class="">
           </li>
           <li class="alt">
            require.config({
            <span class="comment">
             //引入常用的图表类型的配置
            </span>
           </li>
           <li class="">
           </li>
           <li class="alt">
            paths: {
           </li>
           <li class="">
           </li>
           <li class="alt">
            echarts: chart_path,
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="string">
             ‘echarts/chart/bar’
            </span>
            : chart_path,
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="string">
             ‘echarts/chart/pie’
            </span>
            : chart_path,
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="string">
             ‘echarts/chart/line’
            </span>
            : chart_path,
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="string">
             ‘echarts/chart/k’
            </span>
            : chart_path,
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="string">
             ‘echarts/chart/scatter’
            </span>
            : chart_path,
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="string">
             ‘echarts/chart/radar’
            </span>
            : chart_path,
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="string">
             ‘echarts/chart/chord’
            </span>
            : chart_path,
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="string">
             ‘echarts/chart/force’
            </span>
            : chart_path,
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="string">
             ‘echarts/chart/map’
            </span>
            : map_path
           </li>
           <li class="">
           </li>
           <li class="alt">
            }
           </li>
           <li class="">
           </li>
           <li class="alt">
            });
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="keyword">
             this
            </span>
            .option = { chart: {}, option: option, container: container };
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="keyword">
             return
            </span>
            <span class="keyword">
             this
            </span>
            .option;
           </li>
           <li class="">
           </li>
           <li class="alt">
            }
           </li>
           <li class="">
           </li>
           <li class="alt">
           </li>
          </ol>
         </div>
        </div>
       </div>
       <h3>
        <p name="t5">
        </p>
        2.2 数据格式化
       </h3>
       <p>
        为了能够更好的展现各种的数据，在进行图表的option配置之前，需要先对从后台请求过来的数据进行格式化。后台返回的数据必须是json格式的数据，且数据类型只能为以下两种类型:
       </p>
       <p>
        Result1=[{name:XXX,value:XXX},{name:XXX,value:XXX}….]
       </p>
       <p>
        Result2=[{name:XXX,group:XXX,value:XXX},{name:XXX,group:XXX,value:XXX]
       </p>
       <p>
        具体的代码实现如下：
       </p>
       <div class="cnblogs_Highlighter">
        <div class="dp-highlighter bg_javascript">
         <div class="bar">
          <div class="tools">
           <b>
            [javascript]
           </b>
           <a class="ViewSource" href="http://blog.csdn.net/xuemoyao/article/details/22602837" title="view plain">
            view plain
           </a>
           <a class="CopyToClipboard" href="http://blog.csdn.net/xuemoyao/article/details/22602837" title="copy">
            copy
           </a>
           <p>
           </p>
           <div>
            <embed align="middle" height="18" id="ZeroClipboardMovie_3" name="ZeroClipboardMovie_3" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18">
            </embed>
           </div>
          </div>
         </div>
         <ol class="dp-c" start="1">
          <li class="alt">
           ChartDataFormate: {
          </li>
          <li class="">
          </li>
          <li class="alt">
           FormateNOGroupData:
           <span class="keyword">
            function
           </span>
           (data) {
           <span class="comment">
            //data的格式如上的Result1，这种格式的数据，多用于饼图、单一的柱形图的数据源
           </span>
          </li>
          <li class="">
          </li>
          <li class="alt">
           <span class="keyword">
            var
           </span>
           categories = [];
          </li>
          <li class="">
          </li>
          <li class="alt">
           <span class="keyword">
            var
           </span>
           datas = [];
          </li>
          <li class="">
          </li>
          <li class="alt">
           <span class="keyword">
            for
           </span>
           (
           <span class="keyword">
            var
           </span>
           i = 0; i &lt; data.length; i++) {
          </li>
          <li class="">
          </li>
          <li class="alt">
           categories.push(data[i].name ||
           <span class="string">
            “”
           </span>
           );
          </li>
          <li class="">
          </li>
          <li class="alt">
           datas.push({ name: data[i].name, value: data[i].value || 0 });
          </li>
          <li class="">
          </li>
          <li class="alt">
           }
          </li>
          <li class="">
          </li>
          <li class="alt">
           <span class="keyword">
            return
           </span>
           { category: categories, data: datas };
          </li>
          <li class="">
          </li>
          <li class="alt">
           },
          </li>
          <li class="">
          </li>
          <li class="alt">
           FormateGroupData:
           <span class="keyword">
            function
           </span>
           (data, type, is_stack) {
           <span class="comment">
            //data的格式如上的Result2，type为要渲染的图表类型：可以为line，bar，is_stack表示为是否是堆积图，这种格式的数据多用于展示多条折线图、分组的柱图
           </span>
          </li>
          <li class="">
          </li>
          <li class="alt">
           <span class="keyword">
            var
           </span>
           chart_type =
           <span class="string">
            ‘line’
           </span>
           ;
          </li>
          <li class="">
          </li>
          <li class="alt">
           <span class="keyword">
            if
           </span>
           (type)
          </li>
          <li class="">
          </li>
          <li class="alt">
           chart_type = type ||
           <span class="string">
            ‘line’
           </span>
           ;
          </li>
          <li class="">
          </li>
          <li class="alt">
           <span class="keyword">
            var
           </span>
           xAxis = [];
          </li>
          <li class="">
          </li>
          <li class="alt">
           <span class="keyword">
            var
           </span>
           group = [];
          </li>
          <li class="">
          </li>
          <li class="alt">
           <span class="keyword">
            var
           </span>
           series = [];
          </li>
          <li class="">
          </li>
          <li class="alt">
           <span class="keyword">
            for
           </span>
           (
           <span class="keyword">
            var
           </span>
           i = 0; i &lt; data.length; i++) {
          </li>
          <li class="">
          </li>
          <li class="alt">
           <span class="keyword">
            for
           </span>
           (
           <span class="keyword">
            var
           </span>
           j = 0; j &lt; xAxis.length &amp;&amp; xAxis[j] != data[i].name; j++);
          </li>
          <li class="">
          </li>
          <li class="alt">
           <span class="keyword">
            if
           </span>
           (j == xAxis.length)
          </li>
          <li class="">
          </li>
          <li class="alt">
           xAxis.push(data[i].name);
          </li>
          <li class="">
          </li>
          <li class="alt">
           <span class="keyword">
            for
           </span>
           (
           <span class="keyword">
            var
           </span>
           k = 0; k &lt; group.length &amp;&amp; group[k] != data[i].group; k++);
          </li>
          <li class="">
          </li>
          <li class="alt">
           <span class="keyword">
            if
           </span>
           (k == group.length)
          </li>
          <li class="">
          </li>
          <li class="alt">
           group.push(data[i].group);
          </li>
          <li class="">
          </li>
          <li class="alt">
           }
          </li>
          <li class="">
          </li>
          <li class="alt">
          </li>
          <li class="">
          </li>
          <li class="alt">
           <span class="keyword">
            for
           </span>
           (
           <span class="keyword">
            var
           </span>
           i = 0; i &lt; group.length; i++) {
          </li>
          <li class="">
          </li>
          <li class="alt">
           <span class="keyword">
            var
           </span>
           temp = [];
          </li>
          <li class="">
          </li>
          <li class="alt">
           <span class="keyword">
            for
           </span>
           (
           <span class="keyword">
            var
           </span>
           j = 0; j &lt; data.length; j++) {
          </li>
          <li class="">
          </li>
          <li class="alt">
           <span class="keyword">
            if
           </span>
           (group[i] == data[j].group) {
          </li>
          <li class="">
          </li>
          <li class="alt">
           <span class="keyword">
            if
           </span>
           (type ==
           <span class="string">
            “map”
           </span>
           )
          </li>
          <li class="">
          </li>
          <li class="alt">
           temp.push({ name: data[j].name, value: data[i].value });
          </li>
          <li class="">
          </li>
          <li class="alt">
           <span class="keyword">
            else
           </span>
          </li>
          <li class="">
          </li>
          <li class="alt">
           temp.push(data[j].value);
          </li>
          <li class="">
          </li>
          <li class="alt">
           }
          </li>
          <li class="">
          </li>
          <li class="alt">
           }
          </li>
          <li class="">
          </li>
          <li class="alt">
           <span class="keyword">
            switch
           </span>
           (type) {
          </li>
          <li class="">
          </li>
          <li class="alt">
           <span class="keyword">
            case
           </span>
           <span class="string">
            ‘bar’
           </span>
           :
          </li>
          <li class="">
          </li>
          <li class="alt">
           <span class="keyword">
            var
           </span>
           series_temp = { name: group[i], data: temp, type: chart_type };
          </li>
          <li class="">
          </li>
          <li class="alt">
           <span class="keyword">
            if
           </span>
           (is_stack)
          </li>
          <li class="">
          </li>
          <li class="alt">
           series_temp = $.extend({}, { stack:
           <span class="string">
            ‘stack’
           </span>
           }, series_temp);
          </li>
          <li class="">
          </li>
          <li class="alt">
           <span class="keyword">
            break
           </span>
           ;
          </li>
          <li class="">
          </li>
          <li class="alt">
           <span class="keyword">
            case
           </span>
           <span class="string">
            ‘map’
           </span>
           :
          </li>
          <li class="">
          </li>
          <li class="alt">
           <span class="keyword">
            var
           </span>
           series_temp = {
          </li>
          <li class="">
          </li>
          <li class="alt">
           name: group[i], type: chart_type, mapType:
           <span class="string">
            ‘china’
           </span>
           , selectedMode:
           <span class="string">
            ‘single’
           </span>
           ,
          </li>
          <li class="">
          </li>
          <li class="alt">
           itemStyle: {
          </li>
          <li class="">
          </li>
          <li class="alt">
           normal: { label: { show:
           <span class="keyword">
            true
           </span>
           } },
          </li>
          <li class="">
          </li>
          <li class="alt">
           emphasis: { label: { show:
           <span class="keyword">
            true
           </span>
           } }
          </li>
          <li class="">
          </li>
          <li class="alt">
           },
          </li>
          <li class="">
          </li>
          <li class="alt">
           data: temp
          </li>
          <li class="">
          </li>
          <li class="alt">
           };
          </li>
          <li class="">
          </li>
          <li class="alt">
           <span class="keyword">
            break
           </span>
           ;
          </li>
          <li class="">
          </li>
          <li class="alt">
           <span class="keyword">
            case
           </span>
           <span class="string">
            ‘line’
           </span>
           :
          </li>
          <li class="">
          </li>
          <li class="alt">
           <span class="keyword">
            var
           </span>
           series_temp = { name: group[i], data: temp, type: chart_type };
          </li>
          <li class="">
          </li>
          <li class="alt">
           <span class="keyword">
            if
           </span>
           (is_stack)
          </li>
          <li class="">
          </li>
          <li class="alt">
           series_temp = $.extend({}, { stack:
           <span class="string">
            ‘stack’
           </span>
           }, series_temp);
          </li>
          <li class="">
          </li>
          <li class="alt">
           <span class="keyword">
            break
           </span>
           ;
          </li>
          <li class="">
          </li>
          <li class="alt">
           <span class="keyword">
            default
           </span>
           :
          </li>
          <li class="">
          </li>
          <li class="alt">
           <span class="keyword">
            var
           </span>
           series_temp = { name: group[i], data: temp, type: chart_type };
          </li>
          <li class="">
          </li>
          <li class="alt">
           }
          </li>
          <li class="">
          </li>
          <li class="alt">
           series.push(series_temp);
          </li>
          <li class="">
          </li>
          <li class="alt">
           }
          </li>
          <li class="">
          </li>
          <li class="alt">
           <span class="keyword">
            return
           </span>
           { category: group, xAxis: xAxis, series: series };
          </li>
          <li class="">
          </li>
          <li class="alt">
           },
          </li>
         </ol>
        </div>
       </div>
       <div class="dp-highlighter bg_javascript">
        <div class="bar">
         <div class="tools">
          <b>
           [javascript]
          </b>
          <a class="ViewSource" href="http://blog.csdn.net/xuemoyao/article/details/22602837" title="view plain">
           view plain
          </a>
          <a class="CopyToClipboard" href="http://blog.csdn.net/xuemoyao/article/details/22602837" title="copy">
           copy
          </a>
          <p>
          </p>
          <div>
           <embed align="middle" height="18" id="ZeroClipboardMovie_4" name="ZeroClipboardMovie_4" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18">
           </embed>
          </div>
         </div>
        </div>
        <ul>
         <li class="alt">
         </li>
        </ul>
       </div>
       <div>
        <p>
         2.3 各种图表类型的配置初始化
        </p>
       </div>
       <p>
        在通过2.2步骤将从后台获得的数据进行初始化之后，我们就可以进行图表的option的配置了，在这里我主要对常用的饼图、柱图（单一、分组、堆积柱图）、折线图（分组、堆积折线图）、柱图+折线（增幅）图、中国地图等图进行了配置项的初始化。具体实现如下：
       </p>
       <div class="cnblogs_Highlighter">
        <div class="dp-highlighter bg_javascript">
         <div class="bar">
          <div class="tools">
           <b>
            [javascript]
           </b>
           <a class="ViewSource" href="http://blog.csdn.net/xuemoyao/article/details/22602837" title="view plain">
            view plain
           </a>
           <a class="CopyToClipboard" href="http://blog.csdn.net/xuemoyao/article/details/22602837" title="copy">
            copy
           </a>
           <p>
           </p>
           <div>
            <embed align="middle" height="18" id="ZeroClipboardMovie_5" name="ZeroClipboardMovie_5" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18">
            </embed>
           </div>
          </div>
         </div>
         <ol class="dp-c" start="1">
          <li class="alt">
           ChartOptionTemplates: {
          </li>
          <li class="">
          </li>
          <li class="alt">
           CommonOption: {
           <span class="comment">
            //通用的图表基本配置
           </span>
          </li>
          <li class="">
          </li>
          <li class="alt">
           tooltip: {
          </li>
          <li class="">
          </li>
          <li class="alt">
           trigger:
           <span class="string">
            ‘axis’
           </span>
           <span class="comment">
            //tooltip触发方式:axis以X轴线触发,item以每一个数据项触发
           </span>
          </li>
          <li class="">
          </li>
          <li class="alt">
           },
          </li>
          <li class="">
          </li>
          <li class="alt">
           toolbox: {
          </li>
          <li class="">
          </li>
          <li class="alt">
           show:
           <span class="keyword">
            true
           </span>
           ,
           <span class="comment">
            //是否显示工具栏
           </span>
          </li>
          <li class="">
          </li>
          <li class="alt">
           feature: {
          </li>
          <li class="">
          </li>
          <li class="alt">
           mark:
           <span class="keyword">
            true
           </span>
           ,
          </li>
          <li class="">
          </li>
          <li class="alt">
           dataView: { readOnly:
           <span class="keyword">
            false
           </span>
           },
           <span class="comment">
            //数据预览
           </span>
          </li>
          <li class="">
          </li>
          <li class="alt">
           restore:
           <span class="keyword">
            true
           </span>
           ,
           <span class="comment">
            //复原
           </span>
          </li>
          <li class="">
          </li>
          <li class="alt">
           saveAsImage:
           <span class="keyword">
            true
           </span>
           <span class="comment">
            //是否保存图片
           </span>
          </li>
          <li class="">
          </li>
          <li class="alt">
           }
          </li>
          <li class="">
          </li>
          <li class="alt">
           }
          </li>
          <li class="">
          </li>
          <li class="alt">
           },
          </li>
          <li class="">
          </li>
          <li class="alt">
           CommonLineOption: {
           <span class="comment">
            //通用的折线图表的基本配置
           </span>
          </li>
          <li class="">
          </li>
          <li class="alt">
           tooltip: {
          </li>
          <li class="">
          </li>
          <li class="alt">
           trigger:
           <span class="string">
            ‘axis’
           </span>
          </li>
          <li class="">
          </li>
          <li class="alt">
           },
          </li>
          <li class="">
          </li>
          <li class="alt">
           toolbox: {
          </li>
          <li class="">
          </li>
          <li class="alt">
           show:
           <span class="keyword">
            true
           </span>
           ,
          </li>
          <li class="">
          </li>
          <li class="alt">
           feature: {
          </li>
          <li class="">
          </li>
          <li class="alt">
           dataView: { readOnly:
           <span class="keyword">
            false
           </span>
           },
           <span class="comment">
            //数据预览
           </span>
          </li>
          <li class="">
          </li>
          <li class="alt">
           restore:
           <span class="keyword">
            true
           </span>
           ,
           <span class="comment">
            //复原
           </span>
          </li>
          <li class="">
          </li>
          <li class="alt">
           saveAsImage:
           <span class="keyword">
            true
           </span>
           ,
           <span class="comment">
            //是否保存图片
           </span>
          </li>
          <li class="">
          </li>
          <li class="alt">
           magicType: [
           <span class="string">
            ‘line’
           </span>
           ,
           <span class="string">
            ‘bar’
           </span>
           ]
           <span class="comment">
            //支持柱形图和折线图的切换
           </span>
          </li>
          <li class="">
          </li>
          <li class="alt">
           }
          </li>
          <li class="">
          </li>
          <li class="alt">
           }
          </li>
          <li class="">
          </li>
          <li class="alt">
           },
          </li>
          <li class="">
          </li>
          <li class="alt">
           Pie:
           <span class="keyword">
            function
           </span>
           (data, name) {
           <span class="comment">
            //data:数据格式：{name：xxx,value:xxx}…
           </span>
          </li>
          <li class="">
          </li>
          <li class="alt">
           <span class="keyword">
            var
           </span>
           pie_datas = ECharts.ChartDataFormate.FormateNOGroupData(data);
          </li>
          <li class="">
          </li>
          <li class="alt">
           <span class="keyword">
            var
           </span>
           option = {
          </li>
          <li class="">
          </li>
          <li class="alt">
           tooltip: {
          </li>
          <li class="">
          </li>
          <li class="alt">
           trigger:
           <span class="string">
            ‘item’
           </span>
           ,
          </li>
          <li class="">
          </li>
          <li class="alt">
           formatter:
           <span class="string">
            ‘{b} : {c} ({d}/%)’
           </span>
           ,
          </li>
          <li class="">
          </li>
          <li class="alt">
           show:
           <span class="keyword">
            true
           </span>
          </li>
          <li class="">
          </li>
          <li class="alt">
           },
          </li>
          <li class="">
          </li>
          <li class="alt">
           legend: {
          </li>
          <li class="">
          </li>
          <li class="alt">
           orient:
           <span class="string">
            ‘vertical’
           </span>
           ,
          </li>
          <li class="">
          </li>
          <li class="alt">
           x:
           <span class="string">
            ‘left’
           </span>
           ,
          </li>
          <li class="">
          </li>
          <li class="alt">
           data: pie_datas.category
          </li>
          <li class="">
          </li>
          <li class="alt">
           },
          </li>
          <li class="">
          </li>
          <li class="alt">
           series: [
          </li>
          <li class="">
          </li>
          <li class="alt">
           {
          </li>
          <li class="">
          </li>
          <li class="alt">
           name: name ||
           <span class="string">
            “”
           </span>
           ,
          </li>
          <li class="">
          </li>
          <li class="alt">
           type:
           <span class="string">
            ‘pie’
           </span>
           ,
          </li>
          <li class="">
          </li>
          <li class="alt">
           radius:
           <span class="string">
            ‘65%’
           </span>
           ,
          </li>
          <li class="">
          </li>
          <li class="alt">
           center: [
           <span class="string">
            ‘50%’
           </span>
           ,
           <span class="string">
            ‘50%’
           </span>
           ],
          </li>
          <li class="">
          </li>
          <li class="alt">
           data: pie_datas.data
          </li>
          <li class="">
          </li>
          <li class="alt">
           }
          </li>
          <li class="">
          </li>
          <li class="alt">
           ]
          </li>
          <li class="">
          </li>
          <li class="alt">
           };
          </li>
          <li class="">
          </li>
          <li class="alt">
           <span class="keyword">
            return
           </span>
           $.extend({}, ECharts.ChartOptionTemplates.CommonOption, option);
          </li>
          <li class="">
          </li>
          <li class="alt">
           },
          </li>
          <li class="">
          </li>
          <li class="alt">
           Lines:
           <span class="keyword">
            function
           </span>
           (data, name, is_stack) {
           <span class="comment">
            //data:数据格式：{name：xxx,group:xxx,value:xxx}…
           </span>
          </li>
          <li class="">
          </li>
          <li class="alt">
           <span class="keyword">
            var
           </span>
           stackline_datas = ECharts.ChartDataFormate.FormateGroupData(data,
           <span class="string">
            ‘line’
           </span>
           , is_stack);
          </li>
          <li class="">
          </li>
          <li class="alt">
           <span class="keyword">
            var
           </span>
           option = {
          </li>
          <li class="">
          </li>
          <li class="alt">
           legend: {
          </li>
          <li class="">
          </li>
          <li class="alt">
           data: stackline_datas.category
          </li>
          <li class="">
          </li>
          <li class="alt">
           },
          </li>
          <li class="">
          </li>
          <li class="alt">
           xAxis: [{
          </li>
          <li class="">
          </li>
          <li class="alt">
           type:
           <span class="string">
            ‘category’
           </span>
           ,
           <span class="comment">
            //X轴均为category，Y轴均为value
           </span>
          </li>
          <li class="">
          </li>
          <li class="alt">
           data: stackline_datas.xAxis,
          </li>
          <li class="">
          </li>
          <li class="alt">
           boundaryGap:
           <span class="keyword">
            false
           </span>
           <span class="comment">
            //数值轴两端的空白策略
           </span>
          </li>
          <li class="">
          </li>
          <li class="alt">
           }],
          </li>
          <li class="">
          </li>
          <li class="alt">
           yAxis: [{
          </li>
          <li class="">
          </li>
          <li class="alt">
           name: name ||
           <span class="string">
            ”
           </span>
           ,
          </li>
          <li class="">
          </li>
          <li class="alt">
           type:
           <span class="string">
            ‘value’
           </span>
           ,
          </li>
          <li class="">
          </li>
          <li class="alt">
           splitArea: { show:
           <span class="keyword">
            true
           </span>
           }
          </li>
          <li class="">
          </li>
          <li class="alt">
           }],
          </li>
          <li class="">
          </li>
          <li class="alt">
           series: stackline_datas.series
          </li>
          <li class="">
          </li>
          <li class="alt">
           };
          </li>
          <li class="">
          </li>
          <li class="alt">
           <span class="keyword">
            return
           </span>
           $.extend({}, ECharts.ChartOptionTemplates.CommonLineOption, option);
          </li>
          <li class="">
          </li>
          <li class="alt">
           },
          </li>
          <li class="">
          </li>
          <li class="alt">
           Bars:
           <span class="keyword">
            function
           </span>
           (data, name, is_stack) {
           <span class="comment">
            //data:数据格式：{name：xxx,group:xxx,value:xxx}…
           </span>
          </li>
          <li class="">
          </li>
          <li class="alt">
           <span class="keyword">
            var
           </span>
           bars_dates = ECharts.ChartDataFormate.FormateGroupData(data,
           <span class="string">
            ‘bar’
           </span>
           , is_stack);
          </li>
          <li class="">
          </li>
          <li class="alt">
           <span class="keyword">
            var
           </span>
           option = {
          </li>
          <li class="">
          </li>
          <li class="alt">
           legend: bars_dates.category,
          </li>
          <li class="">
          </li>
          <li class="alt">
           xAxis: [{
          </li>
          <li class="">
          </li>
          <li class="alt">
           type:
           <span class="string">
            ‘category’
           </span>
           ,
          </li>
          <li class="">
          </li>
          <li class="alt">
           data: bars_dates.xAxis,
          </li>
          <li class="">
          </li>
          <li class="alt">
           axisLabel: {
          </li>
          <li class="">
          </li>
          <li class="alt">
           show:
           <span class="keyword">
            true
           </span>
           ,
          </li>
          <li class="">
          </li>
          <li class="alt">
           interval:
           <span class="string">
            ‘auto’
           </span>
           ,
          </li>
          <li class="">
          </li>
          <li class="alt">
           rotate: 0,
          </li>
          <li class="">
          </li>
          <li class="alt">
           margion: 8
          </li>
          <li class="">
          </li>
          <li class="alt">
           }
          </li>
          <li class="">
          </li>
          <li class="alt">
           }],
          </li>
          <li class="">
          </li>
          <li class="alt">
           yAxis: [{
          </li>
          <li class="">
          </li>
          <li class="alt">
           type:
           <span class="string">
            ‘value’
           </span>
           ,
          </li>
          <li class="">
          </li>
          <li class="alt">
           name: name ||
           <span class="string">
            ”
           </span>
           ,
          </li>
          <li class="">
          </li>
          <li class="alt">
           splitArea: { show:
           <span class="keyword">
            true
           </span>
           }
          </li>
          <li class="">
          </li>
          <li class="alt">
           }],
          </li>
          <li class="">
          </li>
          <li class="alt">
           series: bars_dates.series
          </li>
          <li class="">
          </li>
          <li class="alt">
           };
          </li>
          <li class="">
          </li>
          <li class="alt">
           <span class="keyword">
            return
           </span>
           $.extend({}, ECharts.ChartOptionTemplates.CommonLineOption, option);
          </li>
          <li class="">
          </li>
          <li class="alt">
           },
          </li>
          <li class="">
          </li>
          <li class="alt">
           ……..
           <span class="comment">
            //其他的图表配置，如柱图+折线、地图
           </span>
          </li>
          <li class="">
          </li>
          <li class="alt">
           ……..
          </li>
          <li class="">
          </li>
          <li class="alt">
          </li>
          <li class="">
          </li>
          <li class="alt">
           }
          </li>
         </ol>
        </div>
       </div>
       <div>
       </div>
       <h3>
        <p name="t6">
        </p>
        2.4 图形的渲染
       </h3>
       <p>
        在配置好图表类型的option之后，就可进行图表的渲染了，具体的代码实现如下：
       </p>
       <div>
        <div class="cnblogs_Highlighter">
         <div class="dp-highlighter bg_javascript">
          <div class="bar">
           <div class="tools">
            <b>
             [javascript]
            </b>
            <a class="ViewSource" href="http://blog.csdn.net/xuemoyao/article/details/22602837" title="view plain">
             view plain
            </a>
            <a class="CopyToClipboard" href="http://blog.csdn.net/xuemoyao/article/details/22602837" title="copy">
             copy
            </a>
            <p>
            </p>
            <div>
             <embed align="middle" height="18" id="ZeroClipboardMovie_6" name="ZeroClipboardMovie_6" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18">
             </embed>
            </div>
           </div>
          </div>
          <ol class="dp-c" start="1">
           <li class="alt">
            Charts: {
           </li>
           <li class="">
           </li>
           <li class="alt">
            RenderChart:
            <span class="keyword">
             function
            </span>
            (option) {
           </li>
           <li class="">
           </li>
           <li class="alt">
            require([
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="string">
             ‘echarts’
            </span>
            ,
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="string">
             ‘echarts/chart/line’
            </span>
            ,
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="string">
             ‘echarts/chart/bar’
            </span>
            ,
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="string">
             ‘echarts/chart/pie’
            </span>
            ,
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="string">
             ‘echarts/chart/k’
            </span>
            ,
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="string">
             ‘echarts/chart/scatter’
            </span>
            ,
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="string">
             ‘echarts/chart/radar’
            </span>
            ,
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="string">
             ‘echarts/chart/chord’
            </span>
            ,
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="string">
             ‘echarts/chart/force’
            </span>
            ,
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="string">
             ‘echarts/chart/map’
            </span>
           </li>
           <li class="">
           </li>
           <li class="alt">
            ],
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="keyword">
             function
            </span>
            (ec) {
           </li>
           <li class="">
           </li>
           <li class="alt">
            echarts = ec;
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="keyword">
             if
            </span>
            (option.chart &amp;&amp; option.chart.dispose)
           </li>
           <li class="">
           </li>
           <li class="alt">
            option.chart.dispose();
           </li>
           <li class="">
           </li>
           <li class="alt">
            option.chart = echarts.init(option.container);
           </li>
           <li class="">
           </li>
           <li class="alt">
            window.onresize = option.chart.resize;
           </li>
           <li class="">
           </li>
           <li class="alt">
            option.chart.setOption(option.option,
            <span class="keyword">
             true
            </span>
            );
           </li>
           <li class="">
           </li>
           <li class="alt">
            });
           </li>
           <li class="">
           </li>
           <li class="alt">
            },
           </li>
           <li class="">
           </li>
           <li class="alt">
            ……..
            <span class="comment">
             //渲染其他的图表类型，如：地图
            </span>
           </li>
           <li class="">
           </li>
           <li class="alt">
            ……..
           </li>
           <li class="">
           </li>
           <li class="alt">
            }
           </li>
           <li class="">
           </li>
           <li class="alt">
           </li>
          </ol>
         </div>
        </div>
        <p>
         3.  具体页面的使用
        </p>
       </div>
       <p>
        经过2步骤中的一些列的配置、处理、初始化，我们就可以具体的使用了，在每一个aspx页面使用之前，我们首先需要在页面的标题引入以下的文件：
       </p>
       <div>
        <p>
        </p>
        <div class="cnblogs_Highlighter">
         <div class="dp-highlighter bg_javascript">
          <div class="bar">
           <div class="tools">
            <b>
             [javascript]
            </b>
            <a class="ViewSource" href="http://blog.csdn.net/xuemoyao/article/details/22602837" title="view plain">
             view plain
            </a>
            <a class="CopyToClipboard" href="http://blog.csdn.net/xuemoyao/article/details/22602837" title="copy">
             copy
            </a>
            <p>
            </p>
            <div>
             <embed align="middle" height="18" id="ZeroClipboardMovie_7" name="ZeroClipboardMovie_7" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18">
             </embed>
            </div>
           </div>
          </div>
          <ol class="dp-c" start="1">
           <li class="alt">
            &lt;script src=
            <span class="string">
             “/Scripts/jquery-1.4.1.js”
            </span>
            type=
            <span class="string">
             “text/javascript”
            </span>
            &gt;&lt;/script&gt;
           </li>
           <li class="">
           </li>
           <li class="alt">
            &lt;script src=
            <span class="string">
             “/Statics/echarts/esl.js”
            </span>
            type=
            <span class="string">
             “text/javascript”
            </span>
            &gt;&lt;/script&gt;
           </li>
           <li class="">
           </li>
           <li class="alt">
            &lt;script src=
            <span class="string">
             “/Statics/ECharts.js”
            </span>
            type=
            <span class="string">
             “text/javascript”
            </span>
            &gt;&lt;/script&gt;
           </li>
          </ol>
         </div>
        </div>
       </div>
       <p>
        引入之后就可进行使用了，下面演示几个常用的图表的使用：
       </p>
       <p>
        首页每个aspx页面上都有一个div用来做渲染图表的容器，如下：
       </p>
       <div>
        <p>
         &lt;div id=”echart” style=”width:100%; height:400px;”&gt;&lt;/div&gt;
        </p>
       </div>
       <p>
       </p>
       <h3>
        <p name="t7">
        </p>
        3.1 饼图
       </h3>
       <h4>
        <p name="t8">
        </p>
        3.1.1 实现代码
       </h4>
       <div>
        <div class="cnblogs_Highlighter">
         <div class="dp-highlighter bg_javascript">
          <div class="bar">
           <div class="tools">
            <b>
             [javascript]
            </b>
            <a class="ViewSource" href="http://blog.csdn.net/xuemoyao/article/details/22602837" title="view plain">
             view plain
            </a>
            <a class="CopyToClipboard" href="http://blog.csdn.net/xuemoyao/article/details/22602837" title="copy">
             copy
            </a>
            <p>
            </p>
            <div>
             <embed align="middle" height="18" id="ZeroClipboardMovie_8" name="ZeroClipboardMovie_8" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18">
             </embed>
            </div>
           </div>
          </div>
          <ol class="dp-c" start="1">
           <li class="alt">
            &lt;script type=
            <span class="string">
             “text/javascript”
            </span>
            &gt;
           </li>
           <li class="">
           </li>
           <li class="alt">
            $(
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="keyword">
             function
            </span>
            () {
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="keyword">
             var
            </span>
            data = [{ name:
            <span class="string">
             ‘olive’
            </span>
            , value: 20 }, { name:
            <span class="string">
             ‘only’
            </span>
            , value: 20 }, { name:
            <span class="string">
             ‘momo’
            </span>
            , value: 20}];
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="keyword">
             var
            </span>
            option = ECharts.ChartOptionTemplates.Pie(data);
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="keyword">
             var
            </span>
            container = $(
            <span class="string">
             “#echart”
            </span>
            )[0];
           </li>
           <li class="">
           </li>
           <li class="alt">
            opt = ECharts.ChartConfig(container, option);
           </li>
           <li class="">
           </li>
           <li class="alt">
            ECharts.Charts.RenderChart(opt);
           </li>
           <li class="">
           </li>
           <li class="alt">
            }
           </li>
           <li class="">
           </li>
           <li class="alt">
            );
           </li>
           <li class="">
           </li>
           <li class="alt">
            &lt;/script&gt;
           </li>
          </ol>
         </div>
        </div>
        <p>
        </p>
       </div>
       <h4>
        <p name="t9">
        </p>
        3.1.2 展示效果
       </h4>
       <p>
        <img src="http://dataunion.org/wp-content/uploads/2015/01/301932262975052.jpg"/>
       </p>
       <h3>
        <p name="t10">
        </p>
        3.2 柱图
       </h3>
       <h4>
        <p name="t11">
        </p>
        3.2.1 实现代码
       </h4>
       <div>
        <div class="cnblogs_Highlighter">
         <div class="dp-highlighter bg_javascript">
          <div class="bar">
           <div class="tools">
            <b>
             [javascript]
            </b>
            <a class="ViewSource" href="http://blog.csdn.net/xuemoyao/article/details/22602837" title="view plain">
             view plain
            </a>
            <a class="CopyToClipboard" href="http://blog.csdn.net/xuemoyao/article/details/22602837" title="copy">
             copy
            </a>
            <p>
            </p>
            <div>
             <embed align="middle" height="18" id="ZeroClipboardMovie_9" name="ZeroClipboardMovie_9" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18">
             </embed>
            </div>
           </div>
          </div>
          <ol class="dp-c" start="1">
           <li class="alt">
            &lt;script type=
            <span class="string">
             “text/javascript”
            </span>
            &gt;
           </li>
           <li class="">
           </li>
           <li class="alt">
            $(
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="keyword">
             function
            </span>
            () {
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="keyword">
             var
            </span>
            data = [{ name:
            <span class="string">
             ‘olive’
            </span>
            , value: 20 }, { name:
            <span class="string">
             ‘only’
            </span>
            , value: 20 }, { name:
            <span class="string">
             ‘momo’
            </span>
            , value: 20}];
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="keyword">
             var
            </span>
            option = ECharts.ChartOptionTemplates.Bar(data);
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="keyword">
             var
            </span>
            container = $(
            <span class="string">
             “#echart”
            </span>
            )[0];
           </li>
           <li class="">
           </li>
           <li class="alt">
            opt = ECharts.ChartConfig(container, option);
           </li>
           <li class="">
           </li>
           <li class="alt">
            ECharts.Charts.RenderChart(opt);
           </li>
           <li class="">
           </li>
           <li class="alt">
            }
           </li>
           <li class="">
           </li>
           <li class="alt">
            );
           </li>
           <li class="">
           </li>
           <li class="alt">
            $(
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="keyword">
             function
            </span>
            () {
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="keyword">
             var
            </span>
            data = [{ name:
            <span class="string">
             ‘2014-01’
            </span>
            , value: 20, group:
            <span class="string">
             ‘A’
            </span>
            }, { name:
            <span class="string">
             ‘2014-01’
            </span>
            , value: 40, group:
            <span class="string">
             ‘B’
            </span>
            }, { name:
            <span class="string">
             ‘2014-02’
            </span>
            , value: 30, group:
            <span class="string">
             ‘A’
            </span>
            }, { name:
            <span class="string">
             ‘2014-02’
            </span>
            , value: 10, group:
            <span class="string">
             ‘B’
            </span>
            }, { name:
            <span class="string">
             ‘2014-03’
            </span>
            , value: 200, group:
            <span class="string">
             ‘A’
            </span>
            }, { name:
            <span class="string">
             ‘2014-03’
            </span>
            , value: 60, group:
            <span class="string">
             ‘B’
            </span>
            }, { name:
            <span class="string">
             ‘2014-04’
            </span>
            , value: 50, group:
            <span class="string">
             ‘A’
            </span>
            }, { name:
            <span class="string">
             ‘2014-04’
            </span>
            , value: 45, group:
            <span class="string">
             ‘B’
            </span>
            }, { name:
            <span class="string">
             ‘2014-05’
            </span>
            , value: 110, group:
            <span class="string">
             ‘A’
            </span>
            }, { name:
            <span class="string">
             ‘2014-05’
            </span>
            , value: 80, group:
            <span class="string">
             ‘B’
            </span>
            }, { name:
            <span class="string">
             ‘2014-06’
            </span>
            , value: 90, group:
            <span class="string">
             ‘A’
            </span>
            }, { name:
            <span class="string">
             ‘2014-06’
            </span>
            , value: 60, group:
            <span class="string">
             ‘B’
            </span>
            }];
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="keyword">
             var
            </span>
            option = ECharts.ChartOptionTemplates.Bars(data,
            <span class="string">
             ‘Love’
            </span>
            );
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="keyword">
             var
            </span>
            container = $(
            <span class="string">
             “#echart”
            </span>
            )[0];
           </li>
           <li class="">
           </li>
           <li class="alt">
            opt = ECharts.ChartConfig(container, option);
           </li>
           <li class="">
           </li>
           <li class="alt">
            ECharts.Charts.RenderChart(opt);
           </li>
           <li class="">
           </li>
           <li class="alt">
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="keyword">
             var
            </span>
            option = ECharts.ChartOptionTemplates.Bars(data,
            <span class="string">
             ‘Love’
            </span>
            ,
            <span class="keyword">
             true
            </span>
            );
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="keyword">
             var
            </span>
            container = $(
            <span class="string">
             “#echart1”
            </span>
            )[0];
           </li>
           <li class="">
           </li>
           <li class="alt">
            opt = ECharts.ChartConfig(container, option);
           </li>
           <li class="">
           </li>
           <li class="alt">
            ECharts.Charts.RenderChart(opt);
           </li>
           <li class="">
           </li>
           <li class="alt">
            }
           </li>
           <li class="">
           </li>
           <li class="alt">
            );
           </li>
           <li class="">
           </li>
           <li class="alt">
           </li>
           <li class="">
           </li>
           <li class="alt">
            &lt;/script&gt;
           </li>
           <li class="">
           </li>
           <li class="alt">
           </li>
          </ol>
         </div>
        </div>
        <p>
         3.2.2展示效果
        </p>
       </div>
       <p>
        <img src="http://dataunion.org/wp-content/uploads/2015/01/301933299696270.jpg"/>
       </p>
       <p>
        <img src="http://dataunion.org/wp-content/uploads/2015/01/301933512508672.png"/>
       </p>
       <p>
       </p>
       <h3>
        <p name="t12">
        </p>
        3.3 折线图
       </h3>
       <h4>
        <p name="t13">
        </p>
        3.3.1 实现代码
       </h4>
       <div>
        <div class="cnblogs_Highlighter">
         <div class="dp-highlighter bg_javascript">
          <div class="bar">
           <div class="tools">
            <b>
             [javascript]
            </b>
            <a class="ViewSource" href="http://blog.csdn.net/xuemoyao/article/details/22602837" title="view plain">
             view plain
            </a>
            <a class="CopyToClipboard" href="http://blog.csdn.net/xuemoyao/article/details/22602837" title="copy">
             copy
            </a>
            <p>
            </p>
            <div>
             <embed align="middle" height="18" id="ZeroClipboardMovie_10" name="ZeroClipboardMovie_10" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18">
             </embed>
            </div>
           </div>
          </div>
          <ol class="dp-c" start="1">
           <li class="alt">
            &lt;script type=
            <span class="string">
             “text/javascript”
            </span>
            &gt;
           </li>
           <li class="">
           </li>
           <li class="alt">
            $(
            <span class="keyword">
             function
            </span>
            () {
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="keyword">
             var
            </span>
            data = [
           </li>
           <li class="">
           </li>
           <li class="alt">
            { name:
            <span class="string">
             ‘2013-01’
            </span>
            , group:
            <span class="string">
             ‘olive’
            </span>
            , value: 116 },
           </li>
           <li class="">
           </li>
           <li class="alt">
            { name:
            <span class="string">
             ‘2013-01’
            </span>
            , group:
            <span class="string">
             ‘momo’
            </span>
            , value: 115 },
           </li>
           <li class="">
           </li>
           <li class="alt">
            { name:
            <span class="string">
             ‘2013-01’
            </span>
            , group:
            <span class="string">
             ‘only’
            </span>
            , value: 222 },
           </li>
           <li class="">
           </li>
           <li class="alt">
            { name:
            <span class="string">
             ‘2013-01’
            </span>
            , group:
            <span class="string">
             ‘for’
            </span>
            , value: 324 },
           </li>
           <li class="">
           </li>
           <li class="alt">
            { name:
            <span class="string">
             ‘2013-02’
            </span>
            , group:
            <span class="string">
             ‘olive’
            </span>
            , value: 156 },
           </li>
           <li class="">
           </li>
           <li class="alt">
            { name:
            <span class="string">
             ‘2013-02’
            </span>
            , group:
            <span class="string">
             ‘momo’
            </span>
            , value: 185 },
           </li>
           <li class="">
           </li>
           <li class="alt">
            { name:
            <span class="string">
             ‘2013-02’
            </span>
            , group:
            <span class="string">
             ‘only’
            </span>
            , value: 202 },
           </li>
           <li class="">
           </li>
           <li class="alt">
            { name:
            <span class="string">
             ‘2013-02’
            </span>
            , group:
            <span class="string">
             ‘for’
            </span>
            , value: 34 },
           </li>
           <li class="">
           </li>
           <li class="alt">
            { name:
            <span class="string">
             ‘2013-03’
            </span>
            , group:
            <span class="string">
             ‘olive’
            </span>
            , value: 16 },
           </li>
           <li class="">
           </li>
           <li class="alt">
            { name:
            <span class="string">
             ‘2013-03’
            </span>
            , group:
            <span class="string">
             ‘momo’
            </span>
            , value: 51 },
           </li>
           <li class="">
           </li>
           <li class="alt">
            { name:
            <span class="string">
             ‘2013-03’
            </span>
            , group:
            <span class="string">
             ‘only’
            </span>
            , value: 22 },
           </li>
           <li class="">
           </li>
           <li class="alt">
            { name:
            <span class="string">
             ‘2013-03’
            </span>
            , group:
            <span class="string">
             ‘for’
            </span>
            , value: 84 }
           </li>
           <li class="">
           </li>
           <li class="alt">
            ];
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="keyword">
             var
            </span>
            opt = HighChart.ChartOptionTemplates.Line(data,
            <span class="string">
             ‘Love-Rate’
            </span>
            ,
            <span class="string">
             “折线图示例”
            </span>
            );
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="keyword">
             var
            </span>
            container = $(
            <span class="string">
             “#container”
            </span>
            );
           </li>
           <li class="">
           </li>
           <li class="alt">
            HighChart.RenderChart(opt, container);
           </li>
           <li class="">
           </li>
           <li class="alt">
            });
           </li>
           <li class="">
           </li>
           <li class="alt">
            $(
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="keyword">
             function
            </span>
            () {
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="keyword">
             var
            </span>
            data = [{ name:
            <span class="string">
             ‘2014-01’
            </span>
            , value: 20, group:
            <span class="string">
             ‘A’
            </span>
            }, { name:
            <span class="string">
             ‘2014-01’
            </span>
            , value: 40, group:
            <span class="string">
             ‘B’
            </span>
            }, { name:
            <span class="string">
             ‘2014-02’
            </span>
            , value: 30, group:
            <span class="string">
             ‘A’
            </span>
            }, { name:
            <span class="string">
             ‘2014-02’
            </span>
            , value: 10, group:
            <span class="string">
             ‘B’
            </span>
            }, { name:
            <span class="string">
             ‘2014-03’
            </span>
            , value: 200, group:
            <span class="string">
             ‘A’
            </span>
            }, { name:
            <span class="string">
             ‘2014-03’
            </span>
            , value: 60, group:
            <span class="string">
             ‘B’
            </span>
            }, { name:
            <span class="string">
             ‘2014-04’
            </span>
            , value: 50, group:
            <span class="string">
             ‘A’
            </span>
            }, { name:
            <span class="string">
             ‘2014-04’
            </span>
            , value: 45, group:
            <span class="string">
             ‘B’
            </span>
            }, { name:
            <span class="string">
             ‘2014-05’
            </span>
            , value: 110, group:
            <span class="string">
             ‘A’
            </span>
            }, { name:
            <span class="string">
             ‘2014-05’
            </span>
            , value: 80, group:
            <span class="string">
             ‘B’
            </span>
            }, { name:
            <span class="string">
             ‘2014-06’
            </span>
            , value: 90, group:
            <span class="string">
             ‘A’
            </span>
            }, { name:
            <span class="string">
             ‘2014-06’
            </span>
            , value: 60, group:
            <span class="string">
             ‘B’
            </span>
            }];
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="keyword">
             var
            </span>
            option = ECharts.ChartOptionTemplates.Lines(data,
            <span class="string">
             ‘lines’
            </span>
            ,
            <span class="keyword">
             false
            </span>
            );
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="keyword">
             var
            </span>
            container = $(
            <span class="string">
             “#echart”
            </span>
            )[0];
           </li>
           <li class="">
           </li>
           <li class="alt">
            opt = ECharts.ChartConfig(container, option);
           </li>
           <li class="">
           </li>
           <li class="alt">
            ECharts.Charts.RenderChart(opt);
           </li>
           <li class="">
           </li>
           <li class="alt">
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="keyword">
             var
            </span>
            option = ECharts.ChartOptionTemplates.Lines(data,
            <span class="string">
             ‘lines’
            </span>
            ,
            <span class="keyword">
             true
            </span>
            );
           </li>
           <li class="">
           </li>
           <li class="alt">
            <span class="keyword">
             var
            </span>
            container = $(
            <span class="string">
             “#echart1”
            </span>
            )[0];
           </li>
           <li class="">
           </li>
           <li class="alt">
            opt = ECharts.ChartConfig(container, option);
           </li>
           <li class="">
           </li>
           <li class="alt">
            ECharts.Charts.RenderChart(opt);
           </li>
           <li class="">
           </li>
           <li class="alt">
            }
           </li>
           <li class="">
           </li>
           <li class="alt">
            );
           </li>
           <li class="">
           </li>
           <li class="alt">
           </li>
           <li class="">
           </li>
           <li class="alt">
            &lt;/script&gt;
           </li>
           <li class="">
           </li>
           <li class="alt">
           </li>
          </ol>
         </div>
        </div>
        <p>
         3.3.2展示效果
        </p>
       </div>
       <p>
        <img src="http://dataunion.org/wp-content/uploads/2015/01/301934312665330.jpg"/>
       </p>
       <p>
        <img src="http://dataunion.org/wp-content/uploads/2015/01/301934427035525.jpg"/>
       </p>
       <p>
       </p>
       <h3>
        <p name="t14">
        </p>
        3.4 柱图+折线（增幅）图
       </h3>
       <h4>
        <p name="t15">
        </p>
        3.4.1 展示效果
       </h4>
       <p>
        <img src="http://dataunion.org/wp-content/uploads/2015/01/301935287347688.jpg"/>
       </p>
       <h3>
        <p name="t16">
        </p>
        3.5 地图
       </h3>
       <h4>
        <p name="t17">
        </p>
        3.5.3 展示效果
       </h4>
       <p>
        <img src="http://dataunion.org/wp-content/uploads/2015/01/301935497348303.jpg"/>
       </p>
       <p>
       </p>
       <p>
        到这里，基本就把echart的抽象跟使用讲完了，因为时间的关系，还有一些图形的配置、数据处理没有列出代码，但是基本上实现都差不多。希望能给大家带来一些帮助和启发。后续会继续推出HightCharts的抽象使用，敬请期待。
       </p>
       <p>
        From：  http://blog.csdn.net/xuemoyao/article/details/22602837
       </p>
      </div>
      <div>
       <strong>
        注：转载文章均来自于公开网络，仅供学习使用，不会用于任何商业用途，如果侵犯到原作者的权益，请您与我们联系删除或者授权事宜，联系邮箱：contact@dataunion.org。转载数盟网站文章请注明原文章作者，否则产生的任何版权纠纷与数盟无关。
       </strong>
      </div>
      <!--content_text-->
      <div class="fenxian">
       <!-- JiaThis Button BEGIN -->
       <div class="jiathis_style_32x32">
        <p class="jiathis_button_weixin">
        </p>
        <p class="jiathis_button_tsina">
        </p>
        <p class="jiathis_button_qzone">
        </p>
        <p class="jiathis_button_cqq">
        </p>
        <p class="jiathis_button_tumblr">
        </p>
        <a class="jiathis jiathis_txt jtico jtico_jiathis" href="http://www.jiathis.com/share" target="_blank">
        </a>
        <p class="jiathis_counter_style">
        </p>
       </div>
       <!-- JiaThis Button END -->
      </div>
     </article>
     <!--content-->
     <!--相关文章-->
     <div class="xianguan">
      <div class="xianguantitle">
       相关文章！
      </div>
      <ul class="pic">
       <li>
        <a href="http://dataunion.org/24610.html">
         <img src="http://dataunion.org/wp-content/uploads/2016/06/687474703a2f2f61727469636c65732e70686f64616c2e636f6d2f67726170686963732f766d61702e6a7067-300x175.jpg"/>
        </a>
        <a class="link" href="http://dataunion.org/24610.html" rel="bookmark" title="程序员必知的七个图形工具">
         程序员必知的七个图形工具
        </a>
       </li>
       <li>
        <a href="http://dataunion.org/24552.html">
         <img src="http://dataunion.org/wp-content/uploads/2016/06/123627j4ncc1r1hfmmybhz-300x156.jpg"/>
        </a>
        <a class="link" href="http://dataunion.org/24552.html" rel="bookmark" title="相似图片搜索的原理">
         相似图片搜索的原理
        </a>
       </li>
       <li>
        <a href="http://dataunion.org/24538.html">
         <img src="http://dataunion.org/wp-content/uploads/2016/06/210714mgqaie37999iaz4b-300x169.gif"/>
        </a>
        <a class="link" href="http://dataunion.org/24538.html" rel="bookmark" title="可视化对话的未来：神经网络能让emoji聊天更智能">
         可视化对话的未来：神经网络能让emoji聊天更智能
        </a>
       </li>
       <li>
        <a href="http://dataunion.org/24492.html">
         <img src="http://dataunion.org/wp-content/uploads/2016/06/t01b8312cd3c48034c1-300x165.jpg"/>
        </a>
        <a class="link" href="http://dataunion.org/24492.html" rel="bookmark" title="如何利用维基百科的数据可视化当代音乐史">
         如何利用维基百科的数据可视化当代音乐史
        </a>
       </li>
      </ul>
     </div>
     <!--相关文章-->
     <div class="comment" id="comments">
      <!-- You can start editing here. -->
      <!-- If comments are open, but there are no comments. -->
      <div class="title">
       期待你一针见血的评论，Come on！
      </div>
      <div id="respond">
       <p>
        不用想啦，马上
        <a href="http://dataunion.org/wp-login.php?redirect_to=http%3A%2F%2Fdataunion.org%2F6434.html">
         "登录"
        </a>
        发表自已的想法.
       </p>
      </div>
     </div>
     <!-- .nav-single -->
    </div>
    <!--Container End-->
    <aside id="sitebar">
     <div class="sitebar_list2">
      <div class="wptag">
       <span class="tagtitle">
        热门标签+
       </span>
       <div class="tagg">
        <ul class="menu" id="menu-%e5%8f%8b%e6%83%85%e9%93%be%e6%8e%a5">
         <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1605" id="menu-item-1605">
          <a href="http://taidizh.com/">
           泰迪智慧
          </a>
         </li>
         <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-20884" id="menu-item-20884">
          <a href="http://www.transwarp.cn/">
           星环科技
          </a>
         </li>
         <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-3538" id="menu-item-3538">
          <a href="http://datall.org/">
           珈和遥感
          </a>
         </li>
         <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-20888" id="menu-item-20888">
          <a href="http://www.chinahadoop.cn/">
           小象学院
          </a>
         </li>
        </ul>
       </div>
      </div>
     </div>
     <div class="sitebar_list">
      <div class="textwidget">
       <div align="center">
        <a href="http://study.163.com/course/courseMain.htm?courseId=991022" target="_blank">
         <img src="http://dataunion.org/wp-content/uploads/2016/03/dv.jpg"/>
        </a>
       </div>
      </div>
     </div>
     <div class="sitebar_list">
      <h4 class="sitebar_title">
       文章分类
      </h4>
      <div class="tagcloud">
       <a class="tag-link-44" href="http://dataunion.org/category/industry/demo" style="font-size: 10.204724409449pt;" title="4个话题">
        Demo展示
       </a>
       <a class="tag-link-31" href="http://dataunion.org/category/experts" style="font-size: 15.826771653543pt;" title="52个话题">
        专家团队
       </a>
       <a class="tag-link-870" href="http://dataunion.org/category/tech/ai" style="font-size: 19.795275590551pt;" title="273个话题">
        人工智能
       </a>
       <a class="tag-link-488" href="http://dataunion.org/category/%e5%8a%a0%e5%85%a5%e6%95%b0%e7%9b%9f" style="font-size: 8pt;" title="1个话题">
        加入数盟
       </a>
       <a class="tag-link-869" href="http://dataunion.org/category/tech/viz" style="font-size: 17.204724409449pt;" title="93个话题">
        可视化
       </a>
       <a class="tag-link-30" href="http://dataunion.org/category/partners" style="font-size: 10.645669291339pt;" title="5个话题">
        合作伙伴
       </a>
       <a class="tag-link-889" href="http://dataunion.org/category/parterc" style="font-size: 11.582677165354pt;" title="8个话题">
        合作会议
       </a>
       <a class="tag-link-104" href="http://dataunion.org/category/books" style="font-size: 12.96062992126pt;" title="15个话题">
        图书
       </a>
       <a class="tag-link-220" href="http://dataunion.org/category/tech/base" style="font-size: 19.850393700787pt;" title="281个话题">
        基础架构
       </a>
       <a class="tag-link-219" href="http://dataunion.org/category/tech/analysis" style="font-size: 19.409448818898pt;" title="232个话题">
        数据分析
       </a>
       <a class="tag-link-887" href="http://dataunion.org/category/tech/dm" style="font-size: 13.291338582677pt;" title="17个话题">
        数据挖掘
       </a>
       <a class="tag-link-34" href="http://dataunion.org/category/tech" style="font-size: 20.732283464567pt;" title="404个话题">
        文章
       </a>
       <a class="tag-link-1" href="http://dataunion.org/category/uncategorized" style="font-size: 22pt;" title="693个话题">
        未分类
       </a>
       <a class="tag-link-4" href="http://dataunion.org/category/events" style="font-size: 14.503937007874pt;" title="29个话题">
        活动
       </a>
       <a class="tag-link-890" href="http://dataunion.org/category/tech/%e6%b7%b1%e5%ba%a6%e5%ad%a6%e4%b9%a0" style="font-size: 10.204724409449pt;" title="4个话题">
        深度学习
       </a>
       <a class="tag-link-221" href="http://dataunion.org/category/tech/devl" style="font-size: 18.968503937008pt;" title="193个话题">
        编程语言
       </a>
       <a class="tag-link-888" href="http://dataunion.org/category/career" style="font-size: 15.661417322835pt;" title="48个话题">
        职业规划
       </a>
       <a class="tag-link-5" href="http://dataunion.org/category/jobs" style="font-size: 14.11811023622pt;" title="25个话题">
        职位
       </a>
       <a class="tag-link-871" href="http://dataunion.org/category/industry" style="font-size: 15.716535433071pt;" title="49个话题">
        行业
       </a>
       <a class="tag-link-613" href="http://dataunion.org/category/industry/case" style="font-size: 16.984251968504pt;" title="84个话题">
        行业应用
       </a>
       <a class="tag-link-885" href="http://dataunion.org/category/industry/news" style="font-size: 17.425196850394pt;" title="102个话题">
        行业资讯
       </a>
       <a class="tag-link-10" href="http://dataunion.org/category/training" style="font-size: 14.228346456693pt;" title="26个话题">
        课程
       </a>
       <a class="tag-link-16" href="http://dataunion.org/category/sources" style="font-size: 15.661417322835pt;" title="48个话题">
        资源
       </a>
      </div>
     </div>
     <div class="sitebar_list">
      <h4 class="sitebar_title">
       功能
      </h4>
      <ul>
       <li>
        <a href="http://dataunion.org/wp-login.php?action=register">
         注册
        </a>
       </li>
       <li>
        <a href="http://dataunion.org/wp-login.php">
         登录
        </a>
       </li>
       <li>
        <a href="http://dataunion.org/feed">
         文章
         <abbr title="Really Simple Syndication">
          RSS
         </abbr>
        </a>
       </li>
       <li>
        <a href="http://dataunion.org/comments/feed">
         评论
         <abbr title="Really Simple Syndication">
          RSS
         </abbr>
        </a>
       </li>
       <li>
        <a href="https://cn.wordpress.org/" title="基于WordPress，一个优美、先进的个人信息发布平台。">
         WordPress.org
        </a>
       </li>
      </ul>
     </div>
    </aside>
    <div class="clear">
    </div>
   </div>
   <!--main-->
   ﻿
   <footer id="dibu">
    <div class="about">
     <div class="right">
      <ul class="menu" id="menu-%e5%ba%95%e9%83%a8%e8%8f%9c%e5%8d%95">
       <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-18024" id="menu-item-18024">
        <a href="http://dataunion.org/category/partners">
         合作伙伴
        </a>
       </li>
       <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20881" id="menu-item-20881">
        <a href="http://dataunion.org/contribute">
         文章投稿
        </a>
       </li>
       <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-20872" id="menu-item-20872">
        <a href="http://dataunion.org/category/%e5%8a%a0%e5%85%a5%e6%95%b0%e7%9b%9f">
         加入数盟
        </a>
       </li>
       <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22441" id="menu-item-22441">
        <a href="http://dataunion.org/f-links">
         友情链接
        </a>
       </li>
       <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20874" id="menu-item-20874">
        <a href="http://dataunion.org/aboutus">
         关于数盟
        </a>
       </li>
      </ul>
      <p class="banquan">
       数盟社区        ，
        做最棒的数据科学社区
      </p>
     </div>
     <div class="left">
      <ul class="bottomlist">
       <li>
        <a href="http://weibo.com/DataScientistUnion  " target="_blank" 　title="">
         <img src="http://dataunion.org/wp-content/themes/yzipi/images/weibo.png"/>
        </a>
       </li>
       <li>
        <a class="cd-popup-trigger" href="http://dataunion.org/6434.html#0">
         <img src="http://dataunion.org/wp-content/themes/yzipi/images/weixin.png"/>
        </a>
       </li>
      </ul>
      <div class="cd-popup">
       <div class="cd-popup-container">
        <h1>
         扫描二维码,加微信公众号
        </h1>
        <img src="http://dataunion.org/wp-content/themes/yzipi/images/2014-12-06-1515289049.png"/>
        <a class="cd-popup-close" href="http://dataunion.org/6434.html">
        </a>
       </div>
       <!-- cd-popup-container -->
      </div>
      <!-- cd-popup -->
     </div>
    </div>
    <!--about-->
    <div class="bottom">
     <a href="http://dataunion.org/">
      数盟社区
     </a>
     <a href="http://www.miitbeian.gov.cn/" rel="external nofollow" target="_blank">
      京ICP备14026740号
     </a>
     联系我们：
     <a href="mailto:contact@dataunion.org" target="_blank">
      contact@dataunion.org
     </a>
     <div class="tongji">
     </div>
     <!--bottom-->
     <div class="scroll" id="scroll" style="display:none;">
      ︿
     </div>
    </div>
   </footer>
   <!--dibu-->
  </div>
 </body>
</html>